* {
  padding: 0;
  margin: 0;
  user-select: none;
}

html{
  overflow: hidden;
}

body {
  width: 100vw;
  height: 100vh;
  background-size: 100vw 100vh;
  perspective: 100px;
  transform-style: preserve-3d;
  overflow-y: auto;
}

.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .item{
    position: relative;
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;

    .bg{
      position: absolute;
      width: 100%;
      height: 100%;
      transform: translateZ(-50px) scale(2);
      z-index: -1;

      .bg-img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-attachment: fixed;
      }
    }

    .content{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      font:24px '楷体';
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .content-title{
        display: inline-block;
        font:32px '宋体';
        font-weight: bold;
        margin-bottom: 20px;
      }
    }
  }
}
